<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>阿里云盘的侧边导航栏</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="fonts/font.css">
    <link rel="stylesheet" href="120.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口宽度和高度 */
    width: 100vw;
    height: 100vh;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 设置背景 */
    /* background: url("/images/mountain.jpg") no-repeat; */
    background-size: cover;
}
.container{
    width: 100%;
    height: 100%;
    /* 弹性布局 水平排列 */
    display: flex;
}
/* 字体图标 */

/* 左侧导航栏 */
.left_box{
    width: 10rem;
    height: 100%;
    /* 半透明背景 */
    background-color: rgba(0,0,0,0.65);
    /* 背景模糊（毛玻璃） */
    backdrop-filter: blur(90px);
    position: fixed;
    color: #fff;
    font-size: 0.8rem;
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
    /* 设置过渡 */
    /* 不让文字换行 */
    /* white-space: nowrap; */
}
.left_box .left_box_item{
    width: 80%;
    margin: 25px auto;
    /* 高度铺满 */
}
.left_box .item{
    height: 46px;
    /* 弹性布局 垂直居中 */
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding-left: 2rem;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 0.1rem;

}
/* 选中态样式 */
.left_box .item.active,
.left_box .item.active:hover{
    background-color: rgba(255,255,255,0.2);
}
.left_box .item:hover{
    background-color: rgba(255,255,255,0.1);
}
.left_box hr{
    width: 90%;
    margin: 18px auto;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.left_box .icon{
    margin-right: 16px;
}
.title{
    text-align: center;
    width: 100%;
}
.left_box_text {
    vertical-align: baseline;
}
@keyframes move_right {
    from {
    opacity: 0.5;
    left:-10rem;
  }
  to {
    opacity: 1;

    left:0rem;
    z-index: 999;
  }
}
.move_right {
    animation-name: move_right;
    animation-duration: 1s;
    /* 保留最后一帧 */
    animation-fill-mode: forwards;
}
@keyframes move_left {
  from {
    opacity: 1;
    left:-0px;
  }
  to {
    opacity: 0;

    left:-10rem;
    z-index: 999;
  }
}
/* .move_left {
  animation-name: move_left;
  animation-duration: 1s;
  animation-fill-mode: forwards;
} */
    </style>
</head>

<body>
    <button onclick="toggle()" style="border-width: 0;position: fixed;right:40%;border-radius:10px;background:rgb(36, 139, 199,30%);top:20% ;width:100px;padding: 10px;color:rgb(3, 3, 3)">开关</button>
    <div class="container">
        <div class="left_box move_left">
            <div class="left_box_item">
                <div class="title">
                    <i class="fa fa-address-book-o icon  "></i>
                    <span class="left_box_text">xxx管理系统</span>
                </div>
                <hr>
                <div class="item active">
                    <i class="fa fa-address-book-o icon  "></i>
                    <span class="left_box_text">大大</span>
                </div>
                <div class="item">
                    <i class="fa fa-address-book-o icon  "></i>
                    <span class="left_box_text">文件</span>
                </div>
                <div class="item">
                    <!-- <i class="fa fa-address-book-o icon  "></i> -->
                    <span class="left_box_text">文件</span>
                </div>
                
                <div class="item">
                    <!-- <i class="fa fa-address-book-o icon  "></i> -->
                    <span class="left_box_text">文件</span>
                </div>
             
                <div class="footer">
                    <i class="fa fa-address-book-o icon  "></i>
                    <span class="left_box_text">xxx管理系统</span>
                </div>
                <hr>
            </div>
      
        </div>
        
    </div>
    <script>
        // 获取要操作的元素
        let items = document.querySelectorAll('.item');
        let current_tag = document.querySelector('.current-tag');
        let left_box = document.querySelector('.left_box');

        // 设置选中项的样式
        function setActive() {
            items.forEach((item) => {
                item.classList.remove('active');
            })
            this.classList.add('active');
        }
        // 为每一个li设置点击事件
        items.forEach((item) => {
            item.addEventListener('click', setActive);
        })

    
        function toggle(){
            if(document.querySelector(".left_box").classList.contains("move_right")){
                document.querySelector(".left_box").classList.remove("move_right")
                document.querySelector(".left_box").classList.add("move_left")
            }else{
                document.querySelector(".left_box").classList.remove("move_left")
                document.querySelector(".left_box").classList.add("move_right")
            }
            
        }
    </script>
</body>

</html>